<template>
    <div class="full-in-main">
        <el-row class="collect-container">
            <el-col :span="!showRight ? 24 : 18" style="height: inherit">
                <el-scrollbar style="width: 100%;height: 100%">
                    <div v-waterfall="mobile ? 150 : 200" :gap="mobile ? 5 : 10">
                        <el-card @click="openWindow(item.url, item.name)" :shadow="mobile ? 'never' : 'hover'"
                                 class="collect_card" v-for="(item, index) in imageWeb" :key="index">
                            <template #header>
                                <div class="no-wrap">{{ item.name }}</div>
                            </template>
                            <el-image :src="item.image" fit="contain" style="width: 100%;aspect-ratio:1" lazy>
                                <template #error>
                                    <div style="width: 100%;height: 100%;" class="flex-display-center">
                                        暂无缩略图
                                    </div>
                                </template>
                            </el-image>
                            <div class="web-description">
                                <el-scrollbar style="width: 100%;height: 100%">
                                    <div>{{ item.description }}</div>
                                </el-scrollbar>
                            </div>
                        </el-card>
                    </div>
                </el-scrollbar>
            </el-col>
            <el-col :span="6" style="height: inherit;" v-if="showRight">
                <el-scrollbar style="width: 100%;height: 100%">
                    <div v-for="(item, index) in noImageWeb" class="no-image-web" :key="index"
                         @click="openWindow(item.url, item.name)">
                        <div class="no-image-web-title no-wrap">{{ item.name }}</div>
                        <div class="web-description" style="height: fit-content">{{ item.description }}</div>
                    </div>
                </el-scrollbar>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import {useRequest} from "@usehook"
import {mobile} from "@/utils/tools"

let collectWeb = $ref([])

const imageWeb = computed(() => {
    return collectWeb.sort((a, b) => {
        return (b.image ? 1 : 0) - (a.image ? 1 : 0)
    })
})

const noImageWeb = computed(() => {
    return collectWeb.filter((e) => {
        return !e.image
    })
})

const showRight = computed(() => {
    return mobile ? false : noImageWeb.length
})

const openWindow = (url, name) => {
    window.open(url, name)
}

onMounted(() => {
    useRequest({url: "/webCollect/get"}).then((resp) => {
        if (resp && resp.status) {
            collectWeb = resp.data
        }
    })
})
</script>

<style lang="scss" scoped>
:deep(.el-divider--horizontal) {
    margin: 10px 0;
}

.collect_card {
    padding: 5px
}

.mobile .collect_card {
    min-width: 50%;
}

.mobile .collect_card:nth-child(even) {
    padding: 0 0 8px 4px;
}

.mobile .collect_card:nth-child(odd) {
    padding: 0 4px 8px 0;
}

.mobile .collect_card:nth-last-child(-n+2) {
    padding-bottom: 0;
}

:deep(.el-card) {
    background: var(--background);
    border-radius: var(--border-radius);
}

:deep(.el-card__body) {
    padding: 10px;
}

:deep(.el-card__header) {
    padding: 15px;
}

:deep(.no-image-web) {
    background: var(--background);
    border-radius: var(--border-radius);
    padding: 10px;
    margin: 5px;
    border: 1px solid var(--el-border-color-light);
}

:deep(.web-description) {
    height: 75px;
    padding: 5px 0;
}

:deep(.no-image-web-title) {
    padding: 10px;
}

:deep(.collect-container) {
    height: calc(100vh - 70px);
    overflow: hidden;
}

.mobile .collect-container {
    height: 100%;
}
</style>